<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head>
    <meta charset="UTF-8">
    <title>MeetSmart - 预约管理</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css">
    <!-- 引入自定义CSS -->
    <link rel="stylesheet" th:href="@{/css/style.css}">

    <!-- 引入必要的JS库 -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/zh.js"></script>

    <!-- 引入自定义JS -->
    <script th:src="@{/js/app.js}"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <!-- 导航栏代码与dashboard.html相同 -->
</nav>

<div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2><i class="bi bi-calendar-check"></i> 预约管理</h2>
        <a th:href="@{/bookings/new}" class="btn btn-primary">
            <i class="bi bi-plus-lg"></i> 新建预约
        </a>
    </div>

    <div class="card mb-4">
        <div class="card-header bg-primary text-white">
            <h5><i class="bi bi-funnel"></i> 筛选条件</h5>
        </div>
        <div class="card-body">
            <form th:action="@{/bookings}" method="get" class="row g-3">
                <div class="col-md-3">
                    <label for="roomId" class="form-label">会议室</label>
                    <select id="roomId" name="roomId" class="form-select">
                        <option value="">全部会议室</option>
                        <option th:each="room : ${rooms}" th:value="${room.id}" th:text="${room.name}"></option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label for="status" class="form-label">状态</label>
                    <select id="status" name="status" class="form-select">
                        <option value="">全部状态</option>
                        <option th:each="status : ${T(com.meetsmart.model.Booking.BookingStatus).values()}"
                                th:value="${status}" th:text="${status.name()}"></option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label for="startDate" class="form-label">开始日期</label>
                    <input type="date" id="startDate" name="startDate" class="form-control">
                </div>
                <div class="col-md-3">
                    <label for="endDate" class="form-label">结束日期</label>
                    <input type="date" id="endDate" name="endDate" class="form-control">
                </div>
                <div class="col-12">
                    <button type="submit" class="btn btn-primary"><i class="bi bi-search"></i> 搜索</button>
                    <button type="reset" class="btn btn-secondary ms-2"><i class="bi bi-arrow-counterclockwise"></i> 重置</button>
                </div>
            </form>
        </div>
    </div>

    <div class="card">
        <div class="card-header bg-primary text-white">
            <h5><i class="bi bi-list"></i> 预约列表</h5>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-striped table-hover">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>标题</th>
                        <th>会议室</th>
                        <th>预约人</th>
                        <th>时间</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="booking : ${bookings}">
                        <td th:text="${booking.id}"></td>
                        <td th:text="${booking.title}"></td>
                        <td th:text="${booking.room.name}"></td>
                        <td th:text="${booking.user.username}"></td>
                        <td>
                            <span th:text="${#temporals.format(booking.startTime, 'yyyy-MM-dd HH:mm')}"></span> -
                            <span th:text="${#temporals.format(booking.endTime, 'HH:mm')}"></span>
                        </td>
                        <td>
                                <span th:switch="${booking.status}" class="badge">
                                    <span th:case="PENDING" class="bg-warning">待审核</span>
                                    <span th:case="APPROVED" class="bg-success">已批准</span>
                                    <span th:case="REJECTED" class="bg-danger">已拒绝</span>
                                    <span th:case="CANCELLED" class="bg-secondary">已取消</span>
                                    <span th:case="COMPLETED" class="bg-info">已完成</span>
                                </span>
                        </td>
                        <td>
                            <a th:href="@{'/bookings/' + ${booking.id}}" class="btn btn-sm btn-outline-primary me-1">
                                <i class="bi bi-eye"></i> 查看
                            </a>
                            <a sec:authorize="hasRole('ADMIN')" th:href="@{'/bookings/' + ${booking.id} + '/edit'}" class="btn btn-sm btn-outline-secondary me-1">
                                <i class="bi bi-pencil"></i> 编辑
                            </a>
                            <a th:href="@{'/bookings/' + ${booking.id} + '/cancel'}" class="btn btn-sm btn-outline-danger">
                                <i class="bi bi-x-circle"></i> 取消
                            </a>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>